<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSI餐厅小筑 外卖网</title>
    <link href="../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../assets/plugins/footable/css/footable.core.css" rel="stylesheet">
    <link href="../assets/plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet">
    <link href="css/colors/blue.css" id="theme" rel="stylesheet">
     <!-- react -->
     <script src="../build/react.development.js"></script>
     <script src="../build/react-dom.development.js"></script>
     <script src="../build/babel.min.js"></script>
     <script src="../config.js"></script>
</head>

<body class="fix-header card-no-border logo-center">
    <div class="preloader">
        <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" /> </svg>
    </div>
    <div id="main-wrapper">
        <header class="topbar">
            <nav class="navbar top-navbar navbar-expand-md navbar-light">
                <div class="navbar-collapse">
                    <div class="navbar-nav mr-auto mt-md-0">
                        <div class="nav-item"> <a class="navbar-brand" href="https://github.com/LimonSea/CSI-takeout-Course-design-project"><img
                                    src="../assets/images/logo.png" class="light-logo" alt="homepage" /></a> </div>
                    </div>
                    <ul class="navbar-nav my-lg-0">
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href=""
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img
                                    src="../assets/images/users/1.jpg" alt="user" class="profile-pic" /></a>
                            <div class="dropdown-menu dropdown-menu-right scale-up"> 
                                <ul class="dropdown-user">
                                    <li>
                                        <div class="dw-user-box">
                                            <div class="u-img"><img src="../assets/images/users/1.jpg" alt="user"></div>
                                            <div class="u-text">
                                                <h4>Steave Jobs</h4>
                                                <a href="user-setting.html"
                                                    class="btn btn-rounded btn-danger btn-sm">个人设置</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="change_password.html"><i class="ti-user"></i>修改密码</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="cart-list.html"><i class=" ti-shopping-cart"></i>我的购物车</a></li>
                                    <li><a href="user-order-list.html"><i class="ti-receipt"></i> 我的订单</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="login.html"><i class="fa fa-power-off"></i>退出登录</a></li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>
        <aside class="left-sidebar">
            <div class="scroll-sidebar">
                <nav class="sidebar-nav">
                    <ul id="sidebarnav">
                        <li> <a class="has-arrow waves-effect waves-dark" href="menu.html" aria-expanded="false"><i
                                    class="mdi mdi-book-open-variant"></i><span class="hide-menu">菜单</span></a>
                        </li>
                        <li class="three-column"> <a class="has-arrow waves-effect waves-dark" href="cart-list.html"
                                aria-expanded="false"><i class="mdi mdi-clipboard-text"></i><span
                                    class="hide-menu">我的购物车</span></a>
                        </li>
                        <li class="two-column"> <a class="has-arrow waves-effect waves-dark" href="user-order-list.html"
                                aria-expanded="false"><i class="mdi mdi-cart-outline"></i><span
                                    class="hide-menu">我的订单</span></a>
                        </li>
                        <li class="two-column"> <a class="has-arrow waves-effect waves-dark" href="user-setting.html"
                                aria-expanded="false"><i class="mdi mdi-settings"></i><span
                                    class="hide-menu">个人设置</span></a>
                        </li>
                    </ul>
                </nav>
            </div>
        </aside>
        <!-- 用户订单列表的组件 -->
        <div class="page-wrapper" id="userOrder">
           
        </div>
    </div>
    
    <script src="../assets/plugins/jquery/jquery.min.js"></script>
    <script src="../assets/plugins/bootstrap/js/popper.min.js"></script>
    <script src="../assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="js/jquery.slimscroll.js"></script>
    <script src="js/waves.js"></script>
    <script src="js/sidebarmenu.js"></script>
    <script src="../assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"></script>
    <script src="../assets/plugins/sparkline/jquery.sparkline.min.js"></script>
    <script src="js/custom.min.js"></script>
    <script src="../assets/plugins/footable/js/footable.all.min.js"></script>
    <script src="../assets/plugins/bootstrap-select/bootstrap-select.min.js" type="text/javascript"></script>
    <script src="js/footable-init.js"></script>
    <script src="../assets/plugins/styleswitcher/jQuery.style.switcher.js"></script>
    <script>
        function myClick() {
            alert("成功加入购物车！")
        }    
    </script>
    <script type="text/babel">
    class UserOrder extends React.Component{
      constructor(props) {
        super(props)
        this.state = {
          carts: [{
            cartid: 1,
            mealname: '写死的',
            mealprice: 34.8,
            count: 1
          }]
        }
      }
      componentDidMount() {
        let that = this
        // 获取上个页面传递的参数
        let url = location.search
        let str, orderid
        if (url.indexOf('?') !== -1) {
          str = url.substr(1)
          orderid = str.split('=')[1]
        }
        // 获取菜品详情列表
        $.ajax({
            type: 'POST',
            async: false,
            url: global.targetUrl + 'user/getcartlist',
            headers: {
               token: localStorage.token 
            },
            data: {
              'orderid': orderid,
              'currentpage': 0
            },
            success: function (res) {
                console.log('返回的',res)
                if (res.resultMsg.code === 1000) {
                    let num = res.bean.totalpage
                    let carts = res.bean.pojo
                    for (let i = 1; i < num; i++) {
                        $.ajax({
                            type: 'GET',
                            async: false,
                            url: global.targetUrl + 'user/getcartlist',
                            headers: {
                                token: localStorage.token 
                            },
                            data: {
                                'orderid': orderid,
                                'currentpage': i
                            },
                            success: function (ress) {
                                console.log('分页 ', ress)
                                if (ress.resultMsg.code === 1000) {
                                  carts = carts.concat(ress.bean.pojo)
                                }
                            }
                        })
                    }
                    that.setState({
                      carts: carts
                    })
                }
            },
            error:function(){
                console.log("接收失败！")
            }
        })
      }
        render(){
            return (
                <div className="container-fluid">
                <div className="row">
                    <div className="col-12">
                        <div className="card">
                            <div className="table-responsive">
                                <table id="demo-foo-addrow" className="table m-t-30 table-hover contact-list"
                                    data-page-size="10">
                                    <thead>
                                        <tr>
                                            <th>菜系</th>
                                            <th>菜品</th>
                                            <th>单价</th>
                                            <th>数量</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                      {this.state.carts.map(item => {
                                        return (
                                          <tr key={item.cartid}>
                                              <td>{item.cartid}</td>
                                              <td> {item.mealname} </td>
                                              <td> {item.mealprice} </td>
                                              <td> {item.count} </td>
                                          </tr>
                                        )
                                      })}
                                        <div className="form-group">
                                        </div>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                             <td colSpan="7">
                                                <center>
                                                    <a href="user-order-list.html"><button className="btn btn-secondary">返回</button></a>
                                                </center>
                                                <div className="text-right">
                                                    <ul className="pagination"> </ul>
                                                </div>
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                
            )
        }
    }
    
    
    ReactDOM.render(
        <UserOrder />,
        document.getElementById('userOrder')
    )
    </script>
</body>

</html>